<template>
  <div>
    <wxc-overlay
          :show="desk.visiabled"
          opacity="0.6"
          @wxcOverlayBodyClicking="wxcOverlayBodyClicking"
          ></wxc-overlay>
    <div class="announcement-wrapper" :class="[desk.visiabled ? 'show' : 'hide']">
      <div>
        <button class="btn-close iconfont icon-close" @click="handleClose"></button>
      </div>
      <text class="title">{{desk.title}}</text>
      <div class="content">
          <ul>
              <li class="lis">
                  <text class='overallfont'>清输入台号：</text>
              </li>
              <li class="lis">
                    <input type="text" placeholder="清输入台号" class="inputs" value="" />
              </li>
              <li class="lis">
                  <text class='overallfont'>请选择人数：</text>
              </li>
               <li class="lis">
                            <div class="item">
                                <wxc-grid-select
                                :single="true"
                                :customStyles="customStyles"
                                :list="list"
                                @select="params => onSelect(1,params)">
                                </wxc-grid-select>
                            </div>
              </li>
          </ul>
            <div class="buttons">确定</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .announcement-wrapper {
    position: fixed;
    top: 15%;
    left: 40px;
    right: 40px;

    &.hide {
      display: none;
    }

    &.show {
      display: block;
    }

    .btn-close {
      background-color: unset;
      width: fit-content;
      margin: 0 auto 30px auto;
      color: #ffffff;
      font-size: 64px;
      outline: none;
    }

    .title {
      background-color: #F45551;
      padding: 40px 0;
      text-align: center;
      color: #FFFFFF;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    }

    .content {
      background-color: #FFFFFF;
      padding: 40px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      height:600px;
      .lis{
          margin-top:30px;
            .overallfont{
                font-size:25px;
                color:#ccc;
            }
            .inputs{
                width: 98%;
                border: none;
                font-family: inherit;
                font-size: 25px;
                line-height: inherit;
                box-shadow: 0px 0px 10px #ccc inset;
                color: #000;
                padding: 12px;
                padding-left:40px;
                border-radius: 25px;
            }
      }
      .buttons{
          width:98%;
          height:80px;
          text-align: center;
          color:#fff;
          line-height: 80px;;
          background:#F45551;
          border-radius: 100px;
          margin-top:60px;
      }
    }
  }
</style>

<script>
import { WxcOverlay ,WxcGridSelect} from 'weex-ui'

export default {
  components: { WxcOverlay ,WxcGridSelect},
  data () {
    return {
      visiabled: false,
      title: '',
      customStyles: {
        width: '140px',
        height: '50px',
        icon: '',
        color: '#333333',
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#dfdfdf',
        backgroundColor: '#ffffff',
        checkedBorderColor: '#f45551',
        checkedBackgroundColor: '#f45551'
      },
      list:[
        {
          'title': '1-3人',
          'checked': true
        },
        {
          'title': '4-6人',
        },
        {
          'title': '7-9人',
        },
        {
          'title': '10人及以上'
        },
      ]
    }
  },
  props: {
    desk: {
      type: Object,
      default: function () {
        return {
          visiabled: this.visiabled,
          title: this.title,
        }
      }
    }
  },
  methods: {
    wxcOverlayBodyClicking () {
      this.handleClose()
    },
    handleClose () {
      this.desk.visiabled = false
      this.$emit('handleDeskVisiabled', this.desk.visiabled)
    },
    onSelect (res, {selectIndex, checked, checkedList}) {
        console.log(checkedList);
       //Vue.set(this, res, `本次选择的index：${selectIndex}\n是否选中：${checked ? '是' : '否'}\n选中列表：${checkedList.map(item => item.title).join(',')}`);
    },
  }
}
</script>
